<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tlias智能学习辅助系统</title>
  <style>
    body{
      margin: 0;
    }
    .header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: rgb(227, 142, 200);
      padding: 10px 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .header h1{
      margin: 0;
      font-size: 24px;
      font-weight: bold;
    }
    .header a{
      text-decoration: none;
      color: #333;
      font-size: 16px;
    }
    .search-form{
      display: flex;
      align-items: center;
      padding: 20px;
      background-color: #f9f9f9;
      flex-wrap: wrap; /* 适配小屏幕，防止溢出 */
    }
    .search-form input[type="text"],.search-form select{
      margin-right: 10px;
      margin-bottom: 10px; /* 换行时留间距 */
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 200px;
    }
    .search-form button{
      padding: 5px 15px;
      margin-left: 10px;
      margin-bottom: 10px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .search-form button.clear{
      background-color: #6c757d;
    }
    .table{
      min-width: 100%;
      border-collapse: collapse;
      margin: 0 20px;
    }
    .table td,.table th{
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }
    .table thead tr{ /* 表头单独样式，避免悬浮影响 */
      background-color: #f8f9fa;
    }
    .avatar{
      width: 50px;
      height: 50px;
      object-fit: cover;
      border-radius: 50%;
    }
    .footer{
      background-color: #8f8c8c;
      color: white;
      text-align: center;
      padding: 20px 0;
      margin-top: 30px;
    }
    .footer .company-name{
      font-size: 1.1em;
      font-weight: bold;
    }
    .footer .copyright{
      font-size: 0.9em;
    }
    #container{
      width: 80%;
      margin: 0 auto;
    }
    .delete{
      background-color: #dc3545;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 3px 8px;
      cursor: pointer;
      margin-left: 5px;
    }
    .edit{
      background-color: #ffc107;
      color: #333;
      border: none;
      border-radius: 4px;
      padding: 3px 8px;
      cursor: pointer;
    }
    /* 表格行悬浮样式（只针对 tbody 内容行） */
    .table tbody tr:hover{
      background-color: #f2e2e2;
    }
  </style>
</head>
<body>
  <div id="app"> <!-- 改为 app 作为 Vue 挂载点，语义更清晰 -->
    <div class="header">
      <h1>Tlias智能学习辅助系统</h1>
      <a href="#">退出登陆</a>
    </div>
    <form class="search-form">
      <input type="text" name="name" placeholder="姓名" v-model="searchName"/>
      <select name="gender" v-model="searchGender">
        <option value="">性别</option>
        <option value="1">男🚹</option>
        <option value="2">女🚺</option>
      </select>
      <select name="job" v-model="searchJob">
        <option value="">职位</option>
        <option value="1">班主任</option>
        <option value="2">讲师</option>
        <option value="3">学工主管</option>
        <option value="4">教研主任</option>
        <option value="5">咨询师</option>
      </select>
      <button type="button" @click="search">查询</button> <!-- 用 Vue 事件代替原生 submit -->
      <button type="button" class="clear" @click="clearSearch">清空</button>
    </form>
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>头像</th>
          <th>职位</th>
          <th>入职日期</th>
          <th>最后操作时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 1. 修复 Vue 指令：v-for + :key；2. 补充头像列；3. 绑定 Vue 删除事件 -->
        <tr v-for="(emp, index) in filteredEmpList" :key="emp.id">
          <td>{{ emp.name }}</td>
          <td>{{ emp.gender === 1 ? '男🚹' : '女🚺' }}</td>
          <!-- 补充头像列，与表头对应 -->
          <td><img :src="emp.image" :alt="emp.name" class="avatar"></td>
          <!-- 优化 job 判断：用对象映射代替嵌套三元，更易读 -->
          <td>{{ jobMap[emp.job] || '未知' }}</td>
          <td>{{ emp.entrydate }}</td>
          <!-- 格式化时间（去掉 T 后的冗余字符） -->
          <td>{{ formatTime(emp.updatetime) }}</td>
          <td class="btn-group">
            <button class="edit" @click="editEmp(emp.id)">编辑</button>
            <button class="delete" @click="deleteEmp(index)">删除</button>
          </td>
        </tr>
        <!-- 无数据时显示提示 -->
        <tr v-if="filteredEmpList.length === 0">
          <td colspan="7" style="color: #666;">暂无匹配数据</td>
        </tr>
      </tbody>
    </table>
    <footer class="footer">
      <p class="company-name">月薪过万来黑马程序员🧑‍💻</p>
      <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
    </footer>
  </div>

  <!-- Vue 3 引入（放在 body 末尾，确保 DOM 已加载） -->
  <script type="module">
    // 引入 Vue 3
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          // 原始员工数据
          empList: [
            { 
              id: 1,
              name: "谢逊",
              image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
              gender: 1,
              job: "1", // 对应职位：1=班主任
              entrydate: "2023-06-09",
              updatetime: "2024-07-30T14:59:38"
            },
            {
              id: 2,
              name: "韦一笑",
              image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
              gender: 1,
              job: "2", // 2=讲师
              entrydate: "2020-05-09",
              updatetime: "2023-07-01T00:00:00"
            },
            {
              id: 3,
              name: "黛绮丝",
              image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
              gender: 2,
              job: "3", // 3=学工主管
              entrydate: "2021-06-01",
              updatetime: "2023-07-01T00:00:00"
            },
            {
              id: 4,
              name: "令狐冲",
              image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
              gender: 1,
              job: "2", // 2=讲师
              entrydate: "2021-03-15",
              updatetime: "2023-07-30T12:00:00"
            },
            {
              id: 5,
              name: "任盈盈",
              image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
              gender: 2,
              job: "3", // 3=学工主管
              entrydate: "2020-04-10",
              updatetime: "2023-07-29T15:00:00"
            }
          ],
          // 搜索条件
          searchName: '',
          searchGender: '',
          searchJob: '',
          // 职位映射表（优化判断逻辑）
          jobMap: {
            "1": "班主任",
            "2": "讲师",
            "3": "学工主管",
            "4": "教研主任",
            "5": "咨询师"
          }
        }
      },
      computed: {
        // 计算属性：根据搜索条件过滤数据
        filteredEmpList() {
          return this.empList.filter(emp => {
            // 姓名模糊匹配
            const nameMatch = emp.name.toLowerCase().includes(this.searchName.toLowerCase());
            // 性别匹配（空则不筛选）
            const genderMatch = this.searchGender === '' || emp.gender === Number(this.searchGender);
            // 职位匹配（空则不筛选）
            const jobMatch = this.searchJob === '' || emp.job === this.searchJob;
            return nameMatch && genderMatch && jobMatch;
          });
        }
      },
      methods: {
          async search() {
        //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
        const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
        this.empList = result.data.data;
      },
        // 删除员工（根据索引删除）
        deleteEmp(index) {
          if (confirm('你是否要删除这条记录？')) {
            this.filteredEmpList.splice(index, 1);
          }
          // 2. 删除原始数据中的对应元素
            if (index !== -1) {
              this.empList.splice(index, 1);
            }
            // （可选）若需同步后端，添加接口请求：
            // axios.delete(`https://web-server.itheima.net/emps/${empId}`)
            //   .catch(err => alert('删除接口失败：' + err.message));
        },
        // 编辑员工（占位方法，可后续扩展）
        editEmp(empId) {
          alert(`编辑员工：ID=${empId}（后续可扩展编辑逻辑）`);
        },
        // 搜索员工（触发计算属性更新）
        searchEmp() {
          // 计算属性会自动响应搜索条件变化，无需额外逻辑
        },
        // 清空搜索条件
        clearSearch() {
          this.searchName = '';
          this.searchGender = '';
          this.searchJob = '';
          this.search();
        },
        // 格式化时间（去掉 T 后的部分，如 "2024-07-30T14:59:38" → "2024-07-30 14:59:38"）
        formatTime(timeStr) {
          return timeStr.replace('T', ' ');
        },
        mounted() {
          this.search();
        },
      }
    }).mount('#app') // 挂载到 #app 元素
  </script>
</body>
</html>